<script setup lang="ts">
import { ref, computed } from "vue";

type poses = "idle" | "speak" | "hello";
const currentPose = ref<poses>("idle"); // 数字人姿态 (替代旧的 currentImage)
const currentImage = computed(() => {
  // 使用 computed 属性动态生成带时间戳的图像 URL，防止缓存问题
  // const timestamp = new Date().getTime()
  // 确保你的图像资源放在 public/person/ 目录下，或者相应调整路径
  // return `/${currentPose.value}.avif?t=${timestamp}`
  return `/person/${currentPose.value}.avif`;
});
defineExpose({
  toIdle: () => {
    currentPose.value = "idle";
  },
  toSpeak: () => {
    currentPose.value = "speak";
  },
  toHello: () => {
    currentPose.value = "hello";
    setTimeout(() => {
      currentPose.value = "speak";
    }, 2600);
  },
  toVideo: () => {
    currentPose.value = "speak";
  },
});
</script>
<template>
  <div class="assistant">
    <img class="human" :src="currentImage" alt="数字人" />
    <img class="preload" src="/person/idle.avif" alt="数字人" />
    <img class="preload" src="/person/hello.avif" alt="数字人" />
    <img class="preload" src="/person/speak.avif" alt="数字人" />
    <!-- <img class="foundation" src="/foundation.png" alt="" /> -->
  </div>
</template>
<style scoped lang="scss">
.preload {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.assistant {
  position: relative;
  max-width: 500px;
  width: 100%;
  .human {
    width: 100%;
    object-fit: contain;
    position: relative;
    z-index: 10;
  }
  .foundation {
    width: 100%;
    max-width: 480px;
    position: absolute;
    bottom: 0;
    left: 53%;
    transform: translate(-55%, 41%);
    z-index: 2;
  }
}
</style>
